<template>
    <div class="content">
        <div class="content-main">
            <el-row :gutter="60">
                <el-col :span="18">
                    <div class="left-content">
                        <div class="left-content-title">
                            <span class="title-name">{{ dataDetails.title }}</span>
                            <div v-if="true">
                                <div class="list-info-block" v-for="(item, index) in infoList" :key="index">
                                    <span class="item-name">{{ item.title }}: </span>
                                    <span>
                                        {{ item.value }}
                                    </span>
                                </div>
                            </div>
                            <div class="list-info-time" v-else>
                                <span>{{ dataDetails.createTime }}</span>
                                <span>
                                    <el-icon style="margin-right: 5px;">
                                        <View />
                                    </el-icon>
                                    7688
                                </span>
                            </div>
                        </div>
                        <h3>技术亮点</h3>
                        <div class="left-content-info" v-html="dataDetails.technicalHighlights">

                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="right-content">
                        <h1>热门成果</h1>
                        <div class="list-info" v-for="(item, index) in listData.splice(0,3)" :key="index">
                            <div class="list-info-img">
                                <div class="list-title">
                                  <el-link @click="navigateToArticle(item.id)">
                                    <span>{{ index + 1 }}. {{ item.title }}</span>
                                  </el-link>
                                </div>
                                <div class="list-tag" v-if="item.achievementNumber">
                                    <el-tag type="primary">{{ item.achievementNumber }}</el-tag>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
import { View } from '@element-plus/icons-vue'
import {cmsAchievementDetail, cmsAchievement, cmsArticleDetail} from "@/api"
import { useRoute } from "vue-router"
import { useRouter } from "vue-router"

const infoList = ref([
    { title: '成果编号', value: '', label: "achievementNumber" },
    { title: '单位名称', value: '', label: "unitName" },
    { title: '单位性质', value: '', label: "unitNatureName" },
    { title: '技术领域', value: '', label: "technicalFieldName" },
    { title: '联系人', value: '', label: "contacts" },
    { title: '联系电话', value: '', label: "contactNumber" },
])
const dataDetails = ref({})
const route = useRoute()
const router = useRouter()

function navigateToArticle(articleId) {
  router.push({ path: '/technologyAssociationDetails', query: { id: articleId } })
  cmsAchievementDetail({ id: articleId }).then(res => {
    if (res.code = "0") {
      dataDetails.value = res.data
      infoList.value.forEach(item => {
        item.value = res.data[item.label]
      })
    }
  })
}

function getDetails() {
    cmsAchievementDetail({ id: route.query.id }).then(res => {
        if (res.code = "0") {
            dataDetails.value = res.data
            infoList.value.forEach(item => {
                item.value = res.data[item.label]
            })
        }
    })
}
const listData = ref([])
function getList() {
    cmsAchievement().then(res => {
        if (res.code == '0') {
            listData.value = res.data.list
        }
    })
}
onMounted(() => {
    getDetails()
    getList()
})
</script>
<style lang="scss" scoped>
.content {
    background-color: #F6FAFF;
    padding: 20px 0;
}

.content-main {
    width: 1200px;
    // height: 1200px;
    margin: auto;

    .left-content {
        width: 100%;
        padding: 20px;
        background-color: #fff;

        .left-content-title {
            margin-bottom: 20px;
            height: 186px;
            border-bottom: 1px solid #EBEDF0;

            .list-info-block {
                display: flex;
                align-items: center;
                padding-left: 20px;
                margin-bottom: 5px;
                font-size: 12px;
                color: #8992A9;

                .item-name {
                    margin-right: 5px;
                }
            }

            .list-info-time {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 80px;
                padding-left: 20px;
                font-size: 12px;
                color: #8992A9;
            }

            .title-name {
                display: block;
                font-size: 22px;
                font-weight: bold;
                margin-left: 20px;
                margin-bottom: 20px;
            }
        }

        .left-content-info {
            min-height: 600px;
            // overflow: auto;
        }
    }

    .right-content {
        width: 100%;
        padding: 20px;
        background-color: #fff;

        h1 {
            margin: 0;
            font-size: 18px;
            font-weight: 500;
        }

        .list-info {
            margin: 15px 10px;
            border-bottom: 1px solid #EBEDF0;

            .list-info-img {
                padding: 10px 20px 5px 0;
                font-size: 13px;
            }

            .list-title {
                display: flex;
                margin-top: 5px;
                margin-bottom: 10px;
                cursor: pointer;
            }

            .list-tag {
                margin-bottom: 5px;
            }
        }
    }
}
</style>